<template>
    <el-row type="flex" justify="center" style="margin-top:80px;margin-bottom:200px">
    <el-col :span="15">
        <el-card class="box-card" >
        <div slot="header" class="clearfix" >
            <el-row>
                        <el-col :span="12"><el-button class="denglu1" style="padding: 3px 0;" type="text" icon="el-icon-user" @click="denglu">登录</el-button></el-col>
                        <el-col :span="12"><el-button class="zhuce1" style="padding: 3px 0;" type="text" @click="zhuce">注册</el-button></el-col>
                </el-row>
        </div>
        
        <div>
            <el-form ref="form" :model="form" label-width="80px" class="form">
            <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
            </el-form-item>

            <el-form-item label="密码">
            <el-input v-model="form.password"></el-input>
            </el-form-item>

            <el-button type="success" @click="ulogin" style="width: 190px">立即登录</el-button>

         </el-form>
        </div>
    </el-card>
    </el-col>
    </el-row>
    
</template>

<style>
.el-card__header{
    padding:0;
}

.el-button--text{
 color: #272727;
}
.zhuce1:hover{
    color:#0f4c81;
    border-color: #758184;
    background-color:#758184;
}

.denglu1{
    width: 100%;
    font-size: 30px;
    height: 80px;
}
.zhuce1{
    width: 100%;
    font-size: 30px;
    height: 80px;
    background-color: #758184;
}

.clearfix{
    text-align: center;
    height: 80px;
}
.form{
    padding-right: 100px;
    margin: 60px 200px;
    text-align: center;  
}
</style>

<script>
import userApi from '@/api/userApi';
export default {
    watchQuery: true,
    data(){
        return {
            form:{},
            verify:false,
        }
    },

    methods:{

        
  
        ulogin(){
            userApi.login(this.form).then(response => {
                this.verify = true
                alert(response.data.message)
                this.$router.push({ path: '/'})
                //this.$parent.getuser()
                //this.getuser()
            })
        },

        denglu(){
            this.$router.push({ path: '/login' })
        },

        zhuce(){
            this.$router.push({ path: '/register' })
        },
    }
}
</script>
